<!--
 * @Author: caihongtai caihongtai
 * @Date: 2025-02-28 11:05:23
 * @LastEditors: caihongtai caihongtai
 * @LastEditTime: 2025-03-18 11:11:38
 * @FilePath: /ai-interview-vue/src/components/NavBar/index.vue
 * @Description: 通用顶部导航栏组件
-->
<template>
    <div class="nav-bar" v-if="showNavBar">
        <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" :border="false" :placeholder="true"
            :fixed="true">
            <template #left>
                <div class="left-area">
                    <van-icon name="arrow-left" size="20" color="#000B24" />
                </div>
            </template>
        </van-nav-bar>
    </div>
</template>

<script setup>
    // <!-- 显示带标题的导航栏 -->
    // <nav-bar title="页面标题" />

    // <!-- 只显示返回按钮的导航栏 -->
    // <nav-bar />

    // <!-- 不显示导航栏 -->
    // <nav-bar :show="false" />

    // <!-- 自定义返回事件的导航栏 -->
    // <nav-bar @back="handleBack" useCustomBack />
    import { computed } from 'vue'
    import { useRouter } from 'vue-router'

    const props = defineProps({
        // 标题
        title: {
            type: String,
            default: ''
        },
        // 是否显示导航栏
        show: {
            type: Boolean,
            default: true
        },
        // 是否使用自定义返回逻辑
        useCustomBack: {
            type: Boolean,
            default: false
        }
    })

    // 定义组件向外部发出的事件
    const emit = defineEmits(['back'])

    const router = useRouter()

    // 计算是否显示导航栏
    const showNavBar = computed(() => {
        return props.show
    })

    // 返回上一页
    const onClickLeft = () => {
        if (props.useCustomBack) {
            // 如果指定使用自定义返回逻辑，触发 back 事件
            emit('back')
        } else {
            // 否则执行默认行为
            router.back()
        }
    }
</script>

<style lang="scss" scoped>
    .nav-bar {
        position: sticky;
        top: 0;
        z-index: 99;

        :deep(.van-nav-bar) {
            background: #ffffff;

            .van-nav-bar__title {
                font-size: 16px;
                font-weight: 500;
                color: #000B24;
            }

            .left-area {
                display: flex;
                align-items: center;
                color: #000B24;
            }
        }
    }
</style>